<!--
 * @Author: your name
 * @Date: 2020-09-11 10:46:30
 * @LastEditTime: 2020-10-30 17:10:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/components/GattDate/components/LineAll/Slider.vue
-->
<template>
  <div ref="slider" class="slider"
    :style="{'backgroundColor': row.perColor && row.perColor.bgColor ? row.perColor.bgColor : ''}">
    <tempalte>
      <tempalte v-if="row.perColor && row.perColor.processColors && Object.keys(row.perColor.processColors).length">
        <div
        :style="{
          width,
          'backgroundColor': (row.perColor.processColors)[getPer(Object.keys(row.perColor.processColors))]
        }"
        class="process"></div>
       </tempalte>
      <tempalte v-else>
        <div :style="{ width }" class="process"></div>
       </tempalte>
    </tempalte>
    <div ref="thunk" class="thunk" :style="{ left }">
      <div class="block">
          <i @mousedown.stop="thunkMousedown" class="el-icon-caret-top"></i>
      </div>
      <div class="tips" v-if="isMove">
        <span>{{ parseInt(scale* 100) }}</span>
        <i class="fas fa-caret-down"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Slider',
  props: ['min', 'max', 'value', 'widths', 'id', 'row', 'parentId', 'fieldsAttr'],
  data () {
    return {
      // 滚动条DOM元素
      slider: null,
      // 拖拽DOM元素
      thunk: null,
      // 当前值
      per: this.value,
      // 当前是否拖拽tip
      isMove: false
    }
  },
  computed: {
    scale () {
      return (this.per - this.min) / (this.max - this.min)
    },
    width () {
      if (this.slider && this.thunk) {
        return this.widths * this.scale + 'px'
      } else {
        return 0 + 'px'
      }
    },
    left () {
      if (this.slider && this.thunk) {
        return this.widths * this.scale - this.thunk.offsetWidth / 2 + 'px'
      } else {
        return 0 + 'px'
      }
    }
  },
  // 渲染到页面的时候
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.slider = this.$refs.slider
        this.thunk = this.$refs.thunk
      })
    },
    getPer (arrData) {
      const arr = Array.from(new Set(arrData))
      const newArray = []
      let j = 0
      for (const i in arr) {
        if (~~arr[i] >= this.per) {
          newArray[j++] = arr[i]
        }
      }
      return Math.min(...newArray)
    },
    thunkMousedown (e) {
      const width = parseInt(this.width)
      const disX = e.clientX
      this.$emit('thunkMousedown')
      this.isMove = true
      document.onmousemove = e => {
        const newWidth = e.clientX - disX + width
        const scale = newWidth / this.slider.offsetWidth
        this.per = Math.ceil((this.max - this.min) * scale + this.min)
        this.per = Math.max(this.per, this.min)
        this.per = Math.min(this.per, this.max)
        this.$emit('thunkMousemove', e, this.index)
      }
      document.onmouseup = event => {
        this.isMove = false
        this.$emit(
          'thunkMouseup',
          parseInt(this.scale * 100),
          event,
          this.id,
          this.parentId
        )
        document.onmousemove = document.onmouseup = null
      }
      return false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .slider
    width 100%
    height 16px
    border-radius 3px
    position relative
    z-index 2
    background #e4e7ed
    cursor move
    user-select none
    .process
      position absolute
      left 0
      top 0
      height 100%
      border-radius 3px
      background-color #409eff
    .thunk
      position absolute
      width 25px
      height 20px
      top 9px
      z-index 0
      .block
        transition  all .2s
        width 100%
        height 100%
        &:hover
          transform scale(1.1)
          opacity 0.6
        i
          font-size 25px
          position relative
          left 0
          cursor pointer
      .tips
        position absolute
        left 1px
        top -13px
        font-size 12px
        line-height 20px
        min-width 15px
        text-align center
        padding 0 5px
        background #000
        border-radius 5px
        height 20px
        color #fff
</style>
